<template>
  <div id="net_type" class="relative">
    <page-loading></page-loading>
    <div class="form-wrap mb20">
      <div v-for="(item, idx) in form" :key="idx" v-show="idx==0||idx>3">
        <os-switch :item=item v-model="formData[idx]"
        v-if="item.type=='switch'" @handleSwitch="handleSwitch"></os-switch>
        <!-- <os-entry :item=item v-if="idx==1">
          <el-select class="select-middle"  v-model="formData[idx]">
            <el-option v-for="(item, idx) in dial" :key="idx"
            :value="item.label" :label="item.label"></el-option>
          </el-select>
        </os-entry>
        <os-entry :item=item v-if="idx==2">
          <el-select class="select-middle">
            <el-option v-for="item in area" :key="item"
            :value="item" :label="item"></el-option>
          </el-select>
        </os-entry>
        <os-entry :item=item v-if="idx==3">
          <el-select class="select-middle">
            <el-option v-for="(item, idx) in isp" :key="idx"
            :value="item.label" :label="item.label"></el-option>
          </el-select>
        </os-entry> -->
        <os-input :item=item v-model="formData[idx]" v-if="item.type=='input'"></os-input>
      </div>
      <!-- <div class="value alone-right add" @click="handle_expand">{{btn_text}}</div> -->
      <div class="value alone-right">
        <div class="btn btn-blue" @click="set_4g">{{$t('btn.save')}}</div>
        <!-- <div class="btn btn-blue">{{$t('btn.disconnect')}}</div>
        <div class="btn btn-blue">{{$t('btn.reconnect')}}</div> -->
      </div>
    </div>
    <os-table :info="info1">
      <tr v-for="(item, idx) in netSignal" :key='idx' slot="table_list">
        <td v-for="(el, key) in ['operator', 'iccid', 'model', 'imei',]" :key='key'>
          {{item[el] ? item[el] : "--"}}
        </td>
        <td :key="4">
          <span :class="'signal' + item.signal"></span>
        </td>
      </tr>
    </os-table>
    <os-table :info="info2" :list="netStatus" :map="['host', 'macaddr', 'txall', 'rxall', 'uptime']"></os-table>
    <!-- <div class="log-wrap mb20">
      <div class="log-title">{{$t('network.net_type.log')}}：</div>
      <div class="log-content"></div>
    </div> -->
    <os-log :title="$t('network.net_type.log')" :log-info="logInfo"></os-log>
    <!-- <div class="toolbar">{{$t('network.net_type.toolbar')}}</div> -->
  </div>
</template>

<script>

  export default {
    data(){
      return {
        limit: 10,
        // 绑定表单数据
        formData: [],
        input_data: '初始化数据',
        switchOff: true,
        dial: [
          {label: 'PPP', value: ''},
          {label: 'GobiNet', value: ''},
          {label: 'USB_DHCP', value: ''},
          {label: 'QMI', value: ''},
        ],
        area: ['China', 'Australia', 'Brazil', 'Brunei', 'Canada'],
        isp: [
          {label: 'China Unicon 3G/4G', value: ''},
          {label: 'China Mobile 3G/4G', value: ''},
          {label: 'China Telecom 3G', value: ''},
          {label: 'China Telecom 4G', value: ''},
        ],
        netSignal: [],
        netStatus: [],
        logInfo: "",
        timer: null,
      }
    },
    methods: {
      // toggle switch 只有两种状态来回变化
      handle_expand(){
        this.limit = this.limit == 1 ? 10 : 1
      },
      handleSwitch(){
        this.switchOff = !this.switchOff
      },
      get_4g(){
        this.$req.get('/webapi?op=get_4g').then(res=> {
          console.log(res)
          this.obj_to_arr(res.data, [ 'mobile_priority', '', '', '',
            'apn', 'dialnumber', 'pin', 'username', 'password',
          ], this.formData)
          console.log(this.formData)
        })
      },
      set_4g(){
        let params = this.arr_to_obj(this.formData, [ 'mobile_priority', '', '', '',
          'apn', 'dialnumber', 'pin', 'username', 'password',
        ])
        console.log(params)
        this.proxy_req('post', '/webapi?op=set_4g', params, res=>
        {
          if(res.code != "1"){
            return
          }
          this.get_4g
        }, true)
      },
      get_signal(){
        this.$req.get("/webapi?op=get_module_signal").then(res=> {
          let { data } = res
          data.forEach((entry, pos) => {
            let sign = parseInt(entry.signal)
            if(sign >= 0 && sign <= 25) {
              entry.signal = 1
            } else if( sign <= 50 ) {
              entry.signal = 2
            } else if( sign <= 75 ) {
              entry.signal = 3
            } else {
              entry.signal = 4
            }
          })
          this.netSignal = res.data
        }).catch(err=> {})
      },
      get_status(){
        this.$req.get("/webapi?op=get_module_status").then(res=> {
          let { data } = res
          data.forEach((data, idx)=> {
            let { ifname, host, macaddr, txall, rxall, uptime } = data
            Object.assign(data, {
              host: ifname + "/" + host,
              macaddr: macaddr ? macaddr : "--",
              txall: this.formatByte(txall),
              rxall: this.formatByte(rxall),
              uptime: this.formatDuration(uptime),
            })
          });
          // console.log(data)
          this.netStatus = data
        }).catch(err=> {})
      },
      get_logInfo(){
        this.$req.get("/webapi?op=get_4g_log").then(res=> {
          this.logInfo = res.content.split("\n")
        })
      }
    },
    computed: {
      form(){
        return this.$t('network.net_type.form')
      },
      info1(){
        return this.$t('network.net_type.info1')
      },
      info2(){
        return this.$t('network.net_type.info2')
      },
      btn_text(){
        return this.limit == 1 ? this.$t('network.net_type.operate') : this.$t('network.net_type.operate_fold')
      }
    },
    created(){
      // sync 同步菜单选项状态 同级别事件相同
      // 不同级别出发事件不能相同
      this.$bus.emit('changeTab', 1)
      this.get_4g()
      this.get_signal()
      this.get_status()
      this.timer = setInterval(()=> {
        this.get_signal()
        this.get_status()
        this.get_logInfo()
      }, 5000)
    },
    beforeDestroy() {
      clearInterval(this.timer)
      this.timer = null
    },
    activated() {
      if(this.timer == null){
        this.timer = setInterval(()=> {
          this.get_signal()
          this.get_status()
          this.get_logInfo()
        }, 5000)
      }
    },
    deactivated(){
      clearInterval(this.timer)
      this.timer = null
    },
  }
</script>

<style lang="scss" scoped>

</style>
